<template>
  <div id="app">
    <table>
      <tr><th></th></tr>
      <tr>
        <th rowspan="2" class="pic"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=623994087,1173615898&fm=26&gp=0.jpg" alt=""></th>
        <th> <span class="fans">粉丝</span>10</th>
        <th> <span class="guanzhu">关注</span>23</th>
        <th> <span class="lv">等级</span> Lv.9</th>
      </tr>
      <tr>
        <th colspan="3"><button>编辑信息</button></th>
      </tr>
      <tr>
        <th colspan="4" class="special"><span class="special-tit">个性签名:  </span>
          这个人没有留下什么....</th>
      </tr>
    </table>
    <CardView></CardView>
  </div>
</template>

<script>
import CardView from '../components/CardView.vue';
export default {
  name: 'app',
  components:{
    CardView
  }
}
</script>

<style lang="scss" scoped>
table{
  width: 100%;
  height: 200px;
  background-color: white;
  text-align: left;
  img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 20px;
    margin-left: 20px;
    border:5px solid #ec4141;
  }
  button{
    width: 80%;
    margin: 0px 10px;
    border-radius: 30px;
    border:2px solid #ec4141;
    font-weight: bold;
  }
}
.pic{
  width: 25%;
}
.fans,.guanzhu,.lv,.special-tit{
  font-size: 25px;
  margin-right: 5px;
  }
.special{
  width: 90%;
  padding-left:5%;
}
</style>